<!doctype html>
<html>

<style>
   body {
      background-size: 200%;

      background-attachment: fixed;

      background-color: bisque;
      border-color: black;
      border-style: dashed;

      border-radius: 10px;
      margin-bottom: 30px;


      max-width: 60%;
      margin-left: 23%;

   }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

<title>个人主页</title>
<center>

   <head>个人主页报告 </head>
</center>

<p>小组人数:1人</p>
<p>姓名：杨凡 &emsp; 学号：0223211 &emsp; 班级：软件工程2213</p>
<p>网站介绍</p>

<div class="l">
   <ul>

      <li>名称：喜羊羊与灰太狼爱豆网</li>
      <li>主题：《喜羊羊与灰太狼》动画的背景知识介绍，人物，剧情等相关内容</li>
      <li>选题目的：对这部动画的童年回忆较深，喜爱浓厚，便想做出这个网站以表致敬</li>
      <li>ps:因为报告完成之后网站再添加了一些内容，所以图片的细节有些不同，但不影响观看</li>


   </ul>

   <p>网站设计</p>

   <ul>

      <li>内容板块：主页面(网站首页）&emsp;专题页面（羊村简介）（盛世羊颜）&emsp;用户页面（用户登录）（用户注册）</li>
      <li>页面组织结构：树形结构</li>
      <li>过程：网站首页板块配备图片对喜羊羊的一些作品进行总结，羊村简介板块介绍了羊村的由来，盛世羊颜采用图片与视频的方式展示了小羊的风貌，同时网站配备了登录注册系统供大家们保存自己的信息。</li>



   </ul>
   <p>网站内容</p>
   <ul>
      <li>主要技术：html,css</li>
      <li>工具：vscode</li>
   </ul>
   <style>
      img {
         width: 70%;
         height: 50%;

      }

      p {
         font-size: large;
      }

      li {
         font-size: medium;
      }
   </style>
   <p>得分点：</p>
   <ul>
      <li>两级导航栏：每张页面上方</li>
      <img src="images/111.gif">
      <li>侧边栏： 羊村简介&emsp; 盛世羊颜&emsp; 的 主内容左边</li>
      <img src="images/112.jpg">
      <li>表格table： 用户登录 &emsp; 用户注册 &emsp;的主要内容,网站首页下方</li>
      <img src="images/113.jpg">
      <img src="images/125.png">
      <li>图片img：每张页面上方均有，网站首页 &emsp;盛世羊颜&emsp;较多</li>
      <img src="images/114.jpg">
      <li>列表ul：网站首页&emsp;板块“第一部”“第二部”</li>
      <img src="images/115.jpg">
      <li>float+clear布局：网站首页&emsp;的主内容(下拉也有)</li>
      <img src="images/116.jpg">
      <li>position定位：导航栏，网站首页&emsp;的“羊羊大电影”板块（图片太亮怕字看不清，所以做了一个固定的灰色背景凸显字。）</li>
      <img src="images/118.jpg">
      <li>文字悬浮于图片上：网站首页&emsp;的“羊羊大电影”板块</li>
      <img src="images/117.jpg">
      <li>伪元素：导航栏（hover）</li>
      <img src="images/119.jpg">



   </ul>
   <p>亮点&加分项</p>
   <ul>
      <li>很多图片是圆角边框</li>
      <li>盛世羊颜&emsp;的图片，鼠标移上去有放大效果</li>
      <img src="images/120.gif">
      <li>网站首页&emsp;“第一部”“第二部”等标题，鼠标移上去会变色</li>
      <img src="images/121.gif">

      <li>网站首页底下有flex布局</li>
      <img src="images/122.png">
      <li>盛世羊颜内容中有grid布局</li>
      <img src="images/123.png">

      <li>报告是响应式布局，主页旁边的绿色背景也是响应式布局</li>
      <img src="images/124.gif">
      <li>动态效果：每张页面的右下角都有可以回到顶部的按钮</li>
      <img src="images/126.gif">
      <li>动态效果：用户注册下方的内容可自动向下移动</li>
      <img src="images/132.gif">
      <li>js特效：在网站首页开头的图片可以手动轮播</li>
      <img src="images/128.gif">

      <li>用户注册页面中的留言处的内容方框可以按住右下角随意拉动调整方框大小</li>
      <img src="images/130.gif">


   </ul>
   <p>遇到的问题</p>
   <ul>
      <li>一开始不知道布局怎么安排，后面不断翻阅网站，从一款游戏网站中获得灵感</li>
      <li>视频上传了好几段，最后还是可能过不了审，问老师才知道要从第三方平台嵌入</li>
      <li>各个场景的配色试了好多次，才找出稍微契合一点的</li>
      <li>首页每个板块的布置为了美观，花费了大量的时间仔细布局</li>
      <li>grid布局与flex布局想了很久也没啥好的创意，最后就用文字填充</li>
      <li>因为担心内容不够多而扩写了注册和登录板块</li>
      <li>“返回顶部”的球是最后才想到的，所以就放在的右下角</li>
      <li>class与id放到css文件夹里面后经常容易打错.和#</li>
      <li>做“羊村简介”板块的时候，本来只有文字，但是显得单调，就补充了人物介绍和图片</li>
      <li>做js轮播特效时，因为对此技术特别不熟练，基本是走一步调试一步，效率较低</li>
      <li>因为很多内容是后面加的，所以css代码后部分就不是按网站顺序排的</li>
   </ul>
   <p>失败或删除的部分</p>
   <ul>


      <li>之前在主界面图片弄了一个可以一排排播放图片的js特效，但因为与主题不契合而忍痛删除，换成了手动轮播

      </li>
      <li>本来从网站上摘取了一个点出来有酷炫的爱心的特效，但是因为代码太复杂，靠自身能力敲不出来而删除(哭)</li>
      <li>能力问题，响应式布局怎么搞也很难完全做出，只能搞部分（再次哭）</li>
      <li>之前想借鉴b站的一些的布局，但是内容和图片太多太杂而作罢</li>

      <li>最开始的版本中视频是单独作为一个网页存在，最后为了简洁而与图片放在一起</li>
      <img src="images/127.jpg">
      <li>等到网页完成的时候才在群里看到可以去参考bookstrap上面的网页，有点小遗憾，觉得早知道的话应该布局会更漂亮一些。但是因为是自己构思的网页，也多了很多纪念的价值吧</li>

   </ul>

   <p>最终结果与讨论</p>
   <ul>
      <li>
         自我评价：网站完成得好简陋，但是也尽力了。。。主题尚可，，内容不够多，小细节做的不够好，有很多空白的地方，也有很多地方颜色多显得刺眼，总体很生疏。自己的专业技能和想象力实在有限，一些板块想了好几天还是停滞不前。自己对网站的敏感程度不够，创造力也不够强，仍需努力！
      </li>
      <li>

         完成大作业的过程中发现自己对于课程中所学的知识很多都生疏
         总是忘记一些基础的代码


      </li>
      <li>很多地方没达到自己的预期，但的确是尽力了，花费了不少时间和精力，相信自己在后面的学习中能更游刃有余地完成，并达到自己的预期</li>
      <li>
         展望：了解到了学习这门课自己专业知识的匮乏，以至于花费了大量的时间还是效果甚微。理解编程语言是首要，但也要勤动手、多思考，多编一些例子，做到将理论和实践相结合，这样才能真正的掌握这门技能。
      </li>

      <li>自己设计的网站在中实际可能没有什么用处，希望通过今后的学习能做出出更有实际用处的网站</li>
      <li>虽然有这么多没达到预期的，但是这只是我的第一次作业，身边可利用的资源也有很多，老师，同学，bootstrap等网站，学无止境，要在积累和见识中成长，前行</li>
      <li>ps:感谢助教和老师！改作业，上课和解决同学们问的问题确实很繁琐，辛苦了哈哈哈！提前祝新年快乐！</li>
   </ul>






   </body>
   <footer class="f">

      <center>
         <p style="font-size: 20px"> <a href="index.html">回到网站</a></p>
      </center>
   </footer>

</html>